<template>
<span>组织名称：</span>
  <a-cascader
    v-model:value="selectedValue"
    :options="processedOptions"
    :show-search="{ filter }"
    expand-trigger="hover"
    change-on-select
  >
    <template #tagRender="data">
      <a-tag :key="data.value" color="blue">{{ data.label }}</a-tag>
    </template>
  </a-cascader>
    <a-button type="primary" style="margin: 0 10px;border-radius: unset;" @click="searchOrg">
        <template #icon>
            <SearchOutlined />
        </template>
        搜索
    </a-button>
    <a-button style="border-radius: unset;" @click="handleReset">
        <template #icon>
            <SyncOutlined />
        </template>
        重置
    </a-button>
</template>
<script lang="ts" setup>
import { 
    SearchOutlined,
    SyncOutlined
} from '@ant-design/icons-vue';
import { computed, ref } from 'vue';
import type { ShowSearchType } from 'ant-design-vue/es/cascader';
import { defineProps, defineEmits } from 'vue';

interface CascadeOption {
  value: string;
  label: string;
  children?: CascadeOption[]
}
interface CascadeProps{
    options: CascadeOption[],
    value: string[],
}

const props = defineProps<CascadeProps>()
const emits = defineEmits(['search', 'reset'])
const selectedValue = ref<string[]>()
const processedOptions = computed(() => {
    return props.options.map(option => ({
        value: option.value,
        label: option.label,
        children: option.children || undefined
    }))
})
//搜索过滤函数
const filter: ShowSearchType['filter'] = (inputValue, path) => {
  return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
};

const searchOrg = () => {
    emits('search', selectedValue.value)
}

const handleReset = () => {
  selectedValue.value = []
  emits('reset')
}

</script>

